<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script crossorigin src="../js/react.production.min.js"></script>
    <!-- 核心库  最先引用 -->
    <script crossorigin src="../js/react-dom.production.min.js"></script>
    <!-- 引用react-dom 用于支持react操作DOM -->
    <script crossorigin src="../js/babel.min.js"></script>
    <!-- 引入babel 用于将jsx转为js -->
    <title>Document</title>
</head>

<body>
    <div id="test"></div>
    <script type="text/babel"> // 此处一定要写babel
        const myid = 'title'
        const mydata = 'hello,react'
        const VDOM = <h1 class={myid} id={myid} style={{ color: 'red' }}>{mydata}</h1>
        /*
            创建dom 不用写引号
            混入js表达式要用{}  
                表达式式可以用另一个值接收的
                    a, a+b,arr.map,function,if(){},for(){},switch(){}
            类名要用className 但好像用class也行
            内联样式  style={{ color: 'red' }}
            只有一个根标签  标签必须闭合
            用组件 首字母要大写  首字母大写为组件 首字母小写为标签
        */
        ReactDOM.render(VDOM, document.getElementById('test')) //渲染
    </script>
</body>

</html>